<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<App></App>
		</div>
		
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/* 
			     beforeCreate
			     created
			     beforeMount
			     mounted
			     beforeUpdate //更新之前
			     updated      //更新之后
			     activated   
			     deactivated
			     beforeDestroy  //销毁之前
			     destroyed      //销毁之后
			     errorCaptured
			 */
			Vue.component('Test',{
				data(){
					return{
						msg:"hello world"
					}
				},
				template:`
					<div>
						<div>{{msg}}</div>
					</div>
				`,
				beforeCreate:function(){//组件创建之前
					console.log("组件创建之前:"+this.msg);
				},
				created:function(){//组件创建之后
					console.log("组件创建之后:"+this.msg);
					//使用该组件，就会调用created方法
					//在created这个方法中可以操作后端的数据 数据驱动视图
					//应用：发起ajax请求
				},
				beforeMount:function(){//挂载数据到DOM之前会调用
					console.log(document.getElementById("app"));
				},
				mounted:function(){//挂载数据到DOM之后会调用 Vue作用之后的DOM
				    //:应用：操作DOM
					console.log(document.getElementById("app"));
				}
			});
		
			//1.声明局部组件(声子)
			var App={
				data(){
					return{
						
					}
				},
				template:`
					<div class='app'>
						<Test />
					</div>
				`,
				
			};
			new Vue({
				el:'#app',
				data(){
					return{
						
					}
				},
				//2.挂载局部组件(挂子)
				components:{
					App
				},
				//3.用子
				// template:'<App />'
			});
		</script>
	</body>
</html>
